<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'

const formRef = ref<FormInstance>()

const form = ref({
    name: '',
    title: '',
    specialization: '',
    experience: '',
    introduction: '',
    availability: ''
})

const rules = ref<FormRules>({
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
    ],
    title: [
        { required: true, message: '请输入职称', trigger: 'blur' }
    ],
    specialization: [
        { required: true, message: '请输入专业方向', trigger: 'blur' }
    ],
    experience: [
        { required: true, message: '请输入工作经验', trigger: 'blur' }
    ],
    introduction: [
        { required: true, message: '请输入个人简介', trigger: 'blur' }
    ],
    availability: [
        { required: true, message: '请输入咨询时间安排', trigger: 'blur' }
    ]
})

const loading = ref(false)

const handleSubmit = async () => {
    if (!formRef.value) return

    try {
        await formRef.value.validate()
        loading.value = true

        // TODO: 实现保存咨询师信息的API调用
        await new Promise(resolve => setTimeout(resolve, 1000))

        ElMessage.success('保存成功')
    } catch (error) {
        if (error instanceof Error) {
            ElMessage.error(error.message)
        } else {
            ElMessage.error('保存失败，请稍后重试')
        }
    } finally {
        loading.value = false
    }
}
</script>

<template>
    <div class="counselor-profile p-6">
        <h2 class="text-2xl font-bold mb-6">咨询师信息管理</h2>
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" class="max-w-3xl">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" />
            </el-form-item>

            <el-form-item label="职称" prop="title">
                <el-input v-model="form.title" />
            </el-form-item>

            <el-form-item label="专业方向" prop="specialization">
                <el-input v-model="form.specialization" />
            </el-form-item>

            <el-form-item label="工作经验" prop="experience">
                <el-input v-model="form.experience" type="textarea" :rows="3" />
            </el-form-item>

            <el-form-item label="个人简介" prop="introduction">
                <el-input v-model="form.introduction" type="textarea" :rows="4" />
            </el-form-item>

            <el-form-item label="咨询时间安排" prop="availability">
                <el-input v-model="form.availability" type="textarea" :rows="3" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="handleSubmit" :loading="loading">
                    保存
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>